<template>
	<view>
		<view>
			<!-- 头部 -->
			<view class="position-relative d-flex a-center animated fadeIn faster" style="height: 320rpx;">
				<image src="https://img-blog.csdnimg.cn/a70f0c01829740cfbace579c4c07a2b6.jpeg" style="height: 320rpx;width: 100%;"></image>
				<view class="d-flex a-center position-absolute left-0 right-0" style="bottom: 50rpx;">
					<image :src="userInfo.avatar?userInfo.avatar:'../../static/images/demo/demo6.jpg'"
						style="height: 145rpx;width: 145rpx;border: 5rpx solid;" class="rounded-circle border-light ml-4">
					</image>
					<view class="ml-2 text-white font-md" @click="goLogin">
						{{userInfo.nickname?userInfo.nickname:'登录/注册'}}
					</view>
					<view v-if="userInfo.status==1" class="d-flex a-center j-center a-self-end ml-auto px-2"
						style="height: 70rpx;background: #FFD43F;color: #CC4A00;border-top-left-radius: 40rpx;border-bottom-left-radius: 40rpx;">
						<view class="line-h iconfont icon-huiyuan1 mr-1"></view>
						会员积分 0.00
					</view>
				</view>
			</view>
			<!-- 图标分类 -->
			<view class="icon">
				<view slot="title" class="d-flex a-center j-sb w-100" v-if="userInfo.status==1" >
					<text class="font-md font-weight">我的订单</text>
					<view class="text-secondary font ml-auto">
						全部订单 <text class="iconfont icon-you font"></text>
					</view>
				</view>
				<view class="d-flex a-center" v-if="userInfo.status==1" >
					<view class="flex-1 d-flex flex-column a-center j-center py-3" hover-class="bg-light-secondary"
						v-for="i in 4" :key="i">
						<view class="iconfont icon-daifukuan font-lg line-h"></view>
						<view>待付款</view>
					</view>
				</view>
				<view-list :title="title"></view-list>
				<divider></divider>
				<view v-if="userInfo.status==1" >
					<view class="text-center py-4" @click="lagout">
						退出登录
					</view>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
import user from '../../store/modules/user'
import {logOutLogin} from '../../api/index.js'
	export default {
		data() {
			return {
				title: [{
						title: '小米会员',
						icon: 'icon-huiyuan',
						leftIconStyle: '#FDBF2E'
					},
					{
						title: '会员中心',
						icon: 'icon-huiyuan1',
						leftIconStyle: '#FCBE2D'
					},
					{
						title: '服务中心',
						icon: 'icon-fuwu',
						leftIconStyle: '#FA6C5E'
					},
					{
						title: '小米之家',
						icon: 'icon-jujia',
						leftIconStyle: '#FE8B42'
					},
					{
						title: '小更多功能',
						icon: 'icon-gengduo1',
						leftIconStyle: '#9ED45A'
					},
				]
			}
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			})
		},
		methods: {
			...mapMutations(['clearUserInfo']),
			goLogin(){
				if(this.userInfo.status ==1){
					return;
				}else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			},
			lagout(){
				//向后端请求，说明已经退出
				logOutLogin().then(res=>{
					console.log('resqwer',res);
					//跳转到登录页
					if(res.msg == 'ok'){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
					//清除缓存
					this.clearUserInfo()
					uni.showToast({
						title:'退出成功'
					})
				})
				
				
				
			}
		}
	}
</script>

<style>

</style>
